import React, { Component } from 'react'
import { Form, Icon, Input, Button, message } from 'antd';
import {Link, Redirect} from 'react-router-dom'
import LoginHeader from '../components/LoginHeader/LoginHeder'

import './login.less'
import { reqLogin } from '../../../api'
import memory from '../../../utils/memory'
import storage from '../../../utils/storage'

class Login extends Component {
    handleSubmit = (event) => {
        event.preventDefault()
        this.props.form.validateFields((err, values) => {
            if (!err) {
                reqLogin(values).then(res => {
                    if(res.code === 0){
                        memory.user = res.body
                        storage.user.save(res.body)
                        message.success(res.msg)
                        setTimeout(() => {
                            this.props.history.replace('/')
                        }, 2000)
                    }else{
                        message.error(res.msg)
                    }
                })
            } else {
                console.log(err)
            }
        });

    }
    render() {
        const user = memory.user
        if(user && user.token){
            return <Redirect to="/" />
        }
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="login">
                <LoginHeader />
                <div className="login-box">
                    <h3>用户登录</h3>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Form.Item>
                            {getFieldDecorator('username', {
                                rules: [
                                    { required: true, message: '请输入用户名或手机号' },
                                    { min: 4, message: '用户名必须大于等于4位' },
                                    { max: 12, message: '用户名必须小于等于12位' },
                                    { pattern: /^[A-Za-z0-9_]+$/, message: '用户名必须由英文字母、数字、下划线组成' },
                                ],
                            })(
                                <Input
                                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder="用户名"
                                />
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('password', {
                                rules: [
                                    { required: true, message: '请输入密码' },
                                    { min: 4, message: '密码必须大于等于4位' },
                                    { max: 12, message: '密码必须小于等于12位' },
                                    { pattern: /^[A-Za-z0-9_]+$/, message: '密码必须由英文字母、数字、下划线组成' },
                                ],
                            })(
                                <Input
                                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type="password"
                                    placeholder="密码"
                                />
                            )}

                        </Form.Item>
                        <Form.Item>

                            <Button type="primary" htmlType="submit" block>登录</Button>
                            <div className="login-form-link">
                                <Link to="/register">注册</Link>
                                <Link to="/forget">忘记密码</Link>
                            </div>

                        </Form.Item>
                    </Form>

                </div>
                
            </div>
        )
    }
}

const WrappedLogin = Form.create()(Login);

export default WrappedLogin
